<template>
  <!--分析报表-天气时间分析(案场) -->
  <el-row style="height:100%">
    <page report="true">
      <div class="page-content report-con weather">
        <div class="reporthead">
          <div class="head-row">
            <span class="choice-title">所属企业：</span>
            <Cascader
              :value.sync="company_id_arr"
              :options.sync="companyOptions"
              :placeholder="'选择所属企业'"
              :width="'300px'"
              :changeEvent="'mallChange'"
              size="small"
            >
            </Cascader>

          </div>
          <div class="head-row" style="height:auto;min-height:36px;">
            <span class="choice-title">时间：</span>
            <div class="datecheck">
              <span>日期选择：</span>
              <!--<el-date-picker-->
                <!--v-model="datetimeval.day"-->
                <!--type="month"-->
                <!--align="right"-->
                <!--unlink-panels-->
                <!--popper-class="report-date"-->
                <!--range-separator="至"-->
                <!--start-placeholder="开始日期"-->
                <!--end-placeholder="结束日期"-->
                <!--value-format="yyyy-MM-dd"-->
                <!--format="yyyy-MM-dd"-->
                <!--v-model="value2"-->
                <!--@change="dayChange"-->
              <!--&gt;-->
              <!--</el-date-picker>-->
              <el-date-picker
                v-model="date"
                @change="dayChange"
                type="month"
                placeholder="选择月">
              </el-date-picker>
              <span v-show="false" style="margin-left: 28px;">时段选择：</span>
              <template>
                <el-time-picker
                  v-show="false"
                  is-range
                  v-model="datetimeval.hm"
                  value-format="HH:mm"
                  format="HH:mm"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  @change="timeChange">
                </el-time-picker>
              </template>
              <el-select v-show="false" v-model="TimeFast" placeholder="快速选择" @change="TimaFastChange" class="timefast">
                <el-option
                  v-for="item in TimeFastList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                @>
                </el-option>
              </el-select>
            </div>
            <el-button type="primary" size="small" class="back-now" @click="refresh()" icon="el-icon-refresh-left">本月</el-button>
          </div>
          <div class="head-row site-row">
            <!--案场名称-->
            <span class="choice-title">{{option.caseTitle}}选择：</span>
            <div class="site">
              <el-select v-model="case_id"  @change="CaseChange"   filterable
                         size="small" placeholder="请选择位置" style="width:100%;">
                <el-option
                  v-for="item in caseInfoOptions"
                  :key="item.id"
                  :label="item.case_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>

        <div class="hei13"></div>
        <Weahter :keys="keys" ref="weather"></Weahter>
        <div class="hei13"></div>
      </div>
    </page>
  </el-row>
</template>

<script>
  import page from "@/components/page/page";
  import moment from "moment";
  import Cascader from "@/components/sys/assembly/elcascader"; //级联选择器
  import reportGlobal from "@/components/global/reportGlobal";
  import Weahter from "@/components/analyzeReport/reportpublic/weather";

  //公共配置
  export default {
    name: "mallWeatherAnalysis",
    components:{
      page,
      Cascader,
      Weahter
    },
    data(){
      return {
        date:moment().format("YYYY-MM"),
        company_id_arr:[],
        companyOptions:[],
        datetimeval:{
          day:[moment(new Date()).format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")],
          hm:["00:00","23:59"]
        },
        TimeFast:'',          //时间快速选择
        TimeFastList:[         //时间快速选择列表
          { label:'全天',value:'today' },
        ],
        pickerOptions: {                //时间日期控件规则
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          },
        },
        option:{
          caseTitle:'',
          areaTitle:''
        },
        case_id:'',
        keysDefault:["enters","exits","stay"],
        keysNameDefault:["客流", "离开", "滞留"],
        keys:[],
        caseInfoOptions:[],
        isCompany:false
      }
    },
    created(){
      for (let i in reportGlobal.queryList) {
        if (this.code == reportGlobal.queryList[i].code) {
          this.global = reportGlobal.queryList[i]
        }
      }
      this.option.caseTitle = this.global.caseTitle
      this.option.areaTitle = this.global.areaTitle
    },
    mounted(){
      //所属企业change事件
      this.$Bus.$on('mallChange',data =>{
        console.log(data)
        this.$Bus.$emit('Loading',true);
        this.company_id=data[data.length-1];
        this.getCaseInfo(data[data.length-1]);
      });
      this.getCompanyTree();
    },
    beforeDestroy(){
      this.$Bus.$off('mallChange');
    },
    methods:{
      refresh(){
        // this.datetimeval.day[0]=moment(new Date()).format("YYYY-MM-DD");
        // this.datetimeval.day[1]=moment(new Date()).format("YYYY-MM-DD");
        this.datetimeval.day=[moment(new Date()).format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")]
        // this.date=[moment(new Date()).format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")]
        console.log(this.date);
        this.date=moment(new Date()).format("YYYY-MM")
        this.Updata();
        // this.$set(,0,moment(new Date()).format("YYYY-MM-DD"));
        // this.$set(this.datetimeval.day,1,moment(new Date()).format("YYYY-MM-DD"));
        // this.TimeFast='today';
        // this.TimaFastChange('today');
      },
      getKpis(id,org_type=2){
        let url='/sys/report_assist_new/get_indicator_list'
        let params = {
          org_id_list : id,
          org_type :org_type,
        }
        this.$Bus.$emit('Loading',true);
        this.$api.post(url,params)
          .then(data=>{

            if(data == '10001'){
              this.$message.error('无权操作该数据')
              return
            }
            if(data){
              let keys=[];
              data.data.forEach(ele=>{
                if(this.keysDefault.includes(ele.key)){
                  ele.name=this.keysNameDefault[this.keysDefault.indexOf(ele.key)];
                  keys.push(ele)
                }
              })
              this.keys=keys;
              // this.keys = data.data.filter(x=>{
              //   console.log(this.keys.includes(x.key));
              //   return this.keys.includes(x.key)
              // })
              // data.data.filter()
              // this.kpislist = data.data.filter(x=>{
              //   return this.global.indicator_keys.includes(x.key)
              // })
              // this.kpislist.sort((x,y)=>{
              //   if(x.id < y.id){
              //     return -1
              //   }else{
              //     return 1
              //   }
              // });
              // let keysArr = this.kpislist.map(x=>{
              //   return x.key
              // })
              // this.kpiType = keysArr.includes(this.kpiType) ? this.kpiType :this.kpislist[0].key;
              this.$nextTick(this.Updata)
            } else{
              this.$Bus.$emit('Loading',false);
            }
          })
          .catch(err=>{

            // this.removeData();
            console.log(err,'企业下无指标');
            this.$Bus.$emit('Loading',false);
          })

      },
      CaseChange(val){
        // if(this.isCompany)
          this.getKpis([this.case_id],2)
        // else
        //   this.Updata();
        // this.isCompany=false
        // console.log(val);
        // this.$Bus.$emit('Loading',true);
        // this.getfloorList(val);
      },
      TimaFastChange(val){
        switch (val) {
          case "today": {
            this.datetimeval.hm = ["00:00", "23:59"];
            this.Updata(false, false);
            break;
          }
        }
      },
      timeChange(val){

        if(val[0] == val[1]){
          this.$message.warning('起始时间不得等于终止时间')
          this.datetimeval.hm = ['00:00','23:59'];
          this.TimeFast='today';
        }
        this.Updata()
      },
      Updata(){
//         console.log("111",this.datetimeval.day)
//         this.$Bus.$emit('Loading',false)
//         if(!(this.datetimeval.day && this.datetimeval.day[0] && this.datetimeval.day[1])) return
//         console.log("222")
        this.$Bus.$emit('Loading',true)
        this.HeatMapData={
          case_id:this.case_id,
          // floor_id:this.floor_id,
          start_day:this.datetimeval.day[0],
          end_day:this.datetimeval.day[1],
          start_hm:this.datetimeval.hm[0],
          end_hm:this.datetimeval.hm[1],
        }
        this.$refs.weather.upData(this.date,this.HeatMapData);

      },
      dayChange(date){
        this.date=moment(date).format("YYYY-MM");
        this.Updata();
      },
      getCompanyTree(){
        this.isCompany=true
        let url = '/sys/report_assist_new/company_tree';
        this.$api.get(url)
          .then(data => {
            if(data == '10001'){
              this.$message.error('无权操作该数据')
              return
            }
            if(data){
              recursion(data.data);
              function recursion(val) {
                if(val.length){
                  for(let i in val){
                    val[i].value = val[i].id;
                    val[i].label = val[i].company_name;
                    val[i].parent_id_str = val[i].parent_name_list ? val[i].parent_name_list.join('/') : '';
                    if(val[i].children && val[i].children.length){
                      recursion(val[i].children)
                    }else{
                      delete val[i].children
                    }
                  }
                }
              }
              this.companyOptions = data.data;
              this.company_id = data.data[0].id
              this.company_id_arr.push(data.data[0].id);
              this.getCaseInfo(data.data[0].id);
            }
          })
          .catch(err=>{
            console.error(err,'企业');
            this.companyOptions = [];
          })
      },
      getCaseInfo(id){
        let parmas={
          org_id_list:Array.of(id),
          org_type:1,
        }
        let url='/sys/report_assist_new/case_list';
        this.$api.post(url,parmas)
          .then(data => {
            if(data == '10001'){
              this.$message.error('无权操作该数据')
              return
            }
            //判断接口返回正常
            if(data.data.length){

              this.caseInfoOptions = data.data;
              this.case_id=data.data[0].id;
              if(this.isCompany)
                this.getKpis([this.case_id],2)
              this.$nextTick(()=>{
                // this.Updata()

              })
            }else{
              this.caseInfoOptions = [];
              this.case_id="";
              // this.floorList=[];
              // this.floor_id='';

              this.$message.warning('该企业下无' + this.option.caseTitle);
              this.$Bus.$emit('Loading',false)
            }
            // this.Updata();
          })
          .catch(err=>{
            this.caseInfoOptions = [];
            this.case_id="";
            // this.floorList=[];
            // this.floor_id='';

            this.$Bus.$emit('Loading',false)
          })
      },
    }
  }
</script>

<style lang="scss">
  .page-content.weather{

      .reporthead {
        width: 100%;
        background: #fff;
        padding: 27px 0 20px 45px;
        .head-row {
          line-height: 36px;
          height: 36px;
          margin-bottom: 15px;
          .choice-title{
            display: inline-block;
            width: 85px;
            margin-right: 5px;
            text-align: left;
          }
          .flooRradio{
            display: inline-block;
            max-width: 85%;
            .el-radio-group{
              .el-radio{
                height: 35px;
                width: 110px;
                padding: 10px 20px 0 10px;
                margin:10px 10px 0 0;
              }
            }
          }
          .block{
            color: #777;
            span{
              margin-right: 2px;
            }
          }
          .back-now{
            margin-left:5px;
            span{
              font-width: 400;
              color:#fff;
            }
          }
          span {
            font-size: 14px;
            color: #777;
          }
          .datecheck {
            .el-input__inner {
              line-height: 36px;
              height: 36px;
              font-size: 14px;
              border-radius: 0;
              width: 250px;
              border-color: #e3eaf4;
              .el-input__icon {
                height: 36px;
                line-height: 36px;
                &.el-range__close-icon {
                  display: none;
                }
              }
              .el-range-separator {
                height: 36px;
                line-height: 36px;
                padding: 0;
                width:6%;
              }
            }
            height: 36px;
            display: inline-block;
            .el-date-editor--date {
              .el-input__inner {
                border-radius: 0;
                border-color: #e3eaf4;
                height: 36px;
                line-height: 36px;
              }
              span,
              i {
                line-height: 36px;
              }
            }
            .timefast{
              width: 120px;
              .el-input__inner {
                padding: 0 20px;
                font-size: 14px;
                margin-left: -6px;
              }
            }
            .el-input--suffix {
              width: 120px;
              .el-input__inner {
                padding-right: 0;
                width: 120px;
              }
              .el-input__prefix {
                .el-input__icon {
                  line-height: 36px;
                  height: 36px;
                }
              }
              .el-input__suffix {
                line-height: 45px;
                vertical-align: middle;
                .el-input__suffix-inner{
                  .el-icon-arrow-up.is-reverse{
                    margin-top: -2px;
                    display: block;
                  }
                }
              }
            }
          }
          &.site-row {
            margin-bottom: 3px;
            position: relative;
            height: auto;
            > span {
              vertical-align: top;
            }
            .xiala {
              position: absolute;
              right: 20px;
              width: 80px;
              height: 36px;
              .iconfont {
                position: absolute;
                height: 36px;
                line-height: 38px;
                right: 10px;
              }
              .el-checkbox {
                width: 80px;
                height: 36px;
                line-height: 36px;
                padding: 0 10px 0 0;
                color: #000;
                .el-checkbox__input {
                  display: none;
                }
                .el-checkbox__label {
                  line-height: 36px;
                  color: #000;
                  padding: 0;
                }
              }

              border-radius: 2px;

              top: 0;
              text-align: center;
            }
            .site,
            .reheadselect {
              display: inline-block;
              width: 300px;
              transition: all 0.5s;
              overflow: hidden;
              &.siteopen{
                overflow-y:auto;
                &::-webkit-scrollbar {/*滚动条整体样式*/
                  width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
                  height: 5px;
                  border-radius: 5px;
                  scrollbar-arrow-color:red;
                }
                &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                  border-radius: 5px;
                  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                  background: rgba(0,0,0,0.2);
                  scrollbar-arrow-color:red;
                }
                &::-webkit-scrollbar-track {/*滚动条里面轨道*/
                  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                  background: rgba(0,0,0,0.1);
                  border-radius: 5px;
                }
              }
              /*.el-checkbox,.el-radio {*/
              /*width: 182px;*/
              /*margin: 0 10px 15px 0;*/
              /*padding: 0;*/
              /*height: 36px;*/
              /*line-height: 36px;*/
              /*padding: 0;*/
              /*border-radius: 2px;*/
              /*text-align: center;*/
              /*border-color: #e3eaf4;*/
              /*&.is-checked {*/
              /*border-color: #5580ff;*/
              /*background: #5580ff;*/
              /*.el-checkbox__label ,.el-radio__label{*/
              /*color: #fff;*/
              /*}*/
              /*}*/

              /*&:hover {*/
              /*border-color: #5580ff;*/
              /*}*/
              /*.el-checkbox__input,.el-radio__input {*/
              /*display: none;*/
              /*}*/
              /*.el-checkbox__label,.el-radio__label {*/
              /*padding-left: 0;*/
              /*color: #000;*/
              /*}*/
              /*}*/
            }
          }
          &.show {
            > span {
              vertical-align: bottom;
            }
            height: 24px;
            line-height: 24px;
            .el-radio-group {
              height: 24px;
              line-height: 24px;
              .el-radio-button__inner {
                height: 24px;
                line-height: 22px;
                padding: 0;
                width: 50px;
                font-size: 12px;
              }
            }
            .reload {
              width: 26px;
              line-height: 24px;
              height: 24px;
              vertical-align: middle;
              padding: 0;
              display: inline-block;
              // background-color: #8EC5FC;
              // background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
              // border-color: #8EC5FC;


              background:#ffc02e;border-color:#ffc02e;

            }
          }
        }
      }

    &.report-con {
      padding: 0 0;
    }
    padding: 15px;
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
    .hei13 {
      height: 15px;
      width: 100%;
    }
  }
</style>